<template>
  <div style="background-color: aqua">
    <div>
      <h3>申请</h3>
      <van-radio-group v-model="radio" v-for="i in dict" :key="i" @click="get_type(i.id)">
        <van-radio :name="i.id">{{ i.name }}</van-radio>
      </van-radio-group>
    </div>
    <div>
      <h3>申请表单</h3>
      <table>
        <tr v-for="(i,index) in list" :key="index">
          <td>
            <van-field :label="i.labal" :key="index" v-model="names[index]"></van-field>
          </td>
          <td>
            <select name="" id="" v-model="typevalues[index]" style="width: 150px;height: 45px"
                    @change="get_index(typevalues[index])">
              <option :value="i.value" v-for="i in option1" :key="i">{{ i.text }}</option>
            </select>

          </td>
          <td>
            <div>
              <div style="float: left">
                <van-field v-model="values[index]" label="值:"></van-field>
              </div>
              <div style="float: right">
                <van-button @click="get_shujuyuan(index)">请选择数据源</van-button>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <el-dialog v-model="dialogTableVisible" title="Shipping address">
        <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            style="width: 100%"
            @current-change="handleCurrentChange">
          <el-table-column type="index" width="50"/>
          <el-table-column property="name" label="Name" width="120"/>
        </el-table>
      </el-dialog>
      <van-button @click="add">+</van-button>
      <van-button @click="rem">-</van-button>
      <van-button @click="Submit">提交</van-button>
    </div>
    <div v-show="show_redir">
      <van-radio-group>
        <van-radio name="1">单选框 1</van-radio>
        <van-radio name="2">单选框 2</van-radio>
      </van-radio-group>
    </div>
    <div v-show="show_checked">
      <van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
    </div>
    <div v-show="show_select">
      <select>
        <option value=""></option>
      </select>
    </div>
    <div v-show="show_file">
      <van-uploader :after-read="upload"></van-uploader>
    </div>
  </div>
</template>

<script>
export default {
  name: "dongtibiao",
  data() {
    return {
      list: [{'labal': '名字'}],
      typevalues: {},
      values: {},
      names: {},
      dict: [],
      radio: '',
      option1: [
        {text: '单选框', value: 'redio'},
        {text: '复选框选框', value: 'checked'},
        {text: '下拉框', value: 'select'},
        {text: '上传图片', value: 'file'},
      ],
      value1: 'redio',
      mes: [],
      dialogTableVisible: false,
      tableData: [],
      // 获取单选框类型
      select_type: '',
      // 单选框展示
      show_redir: false,
      // 复选框展示
      show_checked: false,
      show_select: false,
      show_file: false,
      checked:''
    }
  },
  methods: {
    upload: function (file) {
      let data = new FormData()
      data.append('file', file.file)
      const axios = this.axios.create({withCredentials: false})
      axios({url: 'http://localhost:5000/upload',method:'post',data:data})
                .then(res => {
                  console.log(res)
                })
          },
    get_index(index) {
        console.log(index)
        this.select_type = index
        if (this.select_type == 'redio') {
          this.show_redir = true
        }
        if (this.select_type == 'checked') {
          this.show_checked = true
        }
        if (this.select_type == 'select') {
          this.show_select = true
        }
        if (this.select_type == 'file') {
          this.show_file = true
        }

      }
    ,
      rem()
      {
        this.list.pop(({'labal': '名字'}))
      }
    ,
      get_leix:function (value) {
        console.log(value)
      }
    ,
      handleCurrentChange(val)
      {
        this.dialogTableVisible = false
        let index = localStorage.getItem('index')
        this.values[index] = JSON.stringify(val['mes'])
      }
    ,
      get_shujuyuan(index)
      {
        localStorage.setItem('index', index)
        this.dialogTableVisible = true
        this.myaxios('http://localhost:5000/get_shujuyuan', 'get', {})
            .then(res => {
              console.log(res)
              this.tableData = res.data.list
            })
      }
    ,
      Submit()
      {
        let dict = []
        console.log(this.list)
        for (var i = 0; i <= this.list.length; i++) {
          console.log(i)
          let lists = {'lable': this.names[i], 'type': this.typevalues[i], 'values': this.values[i]}
          dict.push(lists)
          console.log(dict)
        }
      }
    ,
      get_type(value)
      {
        console.log(value)
      }
    ,
      get_all()
      {
        this.myaxios('http://localhost:5000/post_liulan', 'get', {})
            .then(res => {
              console.log(res)
              this.dict = res.data.list
            })
      }
    ,
      add()
      {
        this.list.push({'labal': '名字'})
      }
    },
    mounted() {
      this.get_all()
    }
  }
</script>

<style scoped>

</style>
